<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入病种名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-table stripe
              border
              :data="dataList"
              style="width: 100%"
              class="mt-20">
      <el-table-column align="center"
                       type="index"
                       min-width="20">
      </el-table-column>
      <el-table-column align="center"
                       prop="name"
                       label="名称">
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="创建时间"
                       width="150"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column align="center"
                       label="操作"
                       width="180">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handleEdit(scope.row)">编 辑
          </el-button>
          <el-button type="danger"
                     @click="handleDel(scope.row)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>

    <el-dialog :show-close="true"
               append-to-body
               :fullscreen="true"
               :visible.sync="dialogVisible"
               v-if="dialogVisible"
               center>
      <span slot="title">
        <span class="formTitle">新增/编辑</span>
      </span>
      <el-form class="editorForm"
               ref="sizeForm"
               label-width="85px"
               :model="editModel">
        <el-card class="box-card">
          <div slot="header"
               class="clearfix">
            <span>病种信息： {{editModel.name}}</span>
          </div>
        </el-card>
        <br />
        <el-input v-model="chooseDrugName"
                  placeholder="药品名称"
                  class="w-200" />
        <el-button type="primary"
                   @click="initChooseList">查 询</el-button>
        <el-table stripe
                  border
                  :data="chooseList"
                  style="width: 100%"
                  class="mt-20">
          <el-table-column align="center"
                           type="index"
                           min-width="20">
          </el-table-column>
          <el-table-column align="center"
                           prop="name"
                           label="名称">
          </el-table-column>
          <el-table-column align="center"
                           prop="factoryName"
                           label="厂商">
          </el-table-column>
          <el-table-column align="center"
                           prop="drugBrandName"
                           label="品牌">
          </el-table-column>
          <el-table-column align="center"
                           prop="drugDiseaseTypeName"
                           label="病种">
          </el-table-column>
          <el-table-column align="center"
                           prop="drugDiseaseTypeItemName"
                           label="病种类型">
          </el-table-column>
          <el-table-column align="center"
                           prop="type"
                           label="药品分类">
          </el-table-column>
          <el-table-column align="center"
                           prop="sortNum"
                           label="排序">
          </el-table-column>
          <el-table-column align="center"
                           min-width="100"
                           label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="danger"
                         @click="deleteRow(scope.row)">删 除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <page @getList="initChooseList"
              :pageTotal="chooseTotal"
              ref="page"></page>
        <br />
        <el-input v-model="unChooseDrugName"
                  placeholder="请输入药品名称"
                  class="w-200" />
        <el-button type="primary"
                   @click="initUnChooseList">查 询</el-button>
        <el-table stripe
                  border
                  :data="unChooseList"
                  style="width: 100%"
                  class="mt-20">
          <el-table-column align="center"
                           type="index"
                           min-width="20">
          </el-table-column>
          <el-table-column align="center"
                           prop="name"
                           label="名称">
          </el-table-column>
          <el-table-column align="center"
                           prop="factoryName"
                           label="厂商">
          </el-table-column>
          <el-table-column align="center"
                           prop="drugBrandName"
                           label="品牌">
          </el-table-column>
          <el-table-column align="center"
                           min-width="100"
                           label="操作">
            <template slot-scope="scope">
              <el-button type="primary"
                         @click="addDrug(scope.row)">添 加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <page @getList="initUnChooseList"
              :pageTotal="unChooseTotal"
              ref="page"></page>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog :show-close="false"
               append-to-body
               width="40%"
               :visible.sync="diseaseItemVisible"
               v-if="diseaseItemVisible"
               center>
      <span slot="title">
        <span class="formTitle">病种类型</span>
      </span>
      <span>
        病种类型：<el-select v-model="drugDiseaseTypeItems"
                   placeholder="请选择病种类型">
          <el-option v-for="item in drugDiseaseTypeListItem"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        分类： <el-select v-model="types"
                   placeholder="请选择分类">
          <el-option v-for="item in typeList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        分类： <el-input v-model="sortNum"
                  placeholder="请输入排序号"> </el-input>
      </span>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="close">关 闭</el-button>
        <el-button type="primary"
                   @click="save">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from "vuex";
  import VueNeditorWrap from "vue-neditor-wrap";

  export default {
    name: "recommendedDrugs",
    data () {
      return {
        dialogVisible: false,
        diseaseItemVisible: false,
        searchCondition: "",
        chooseDrugName: "",
        unChooseDrugName: "",
        drugDiseaseTypeList: [],
        drugDiseaseTypeListItem: [],
        pageTotal: 0,
        chooseTotal: 0,
        unChooseTotal: 0,
        typeList: [
          {
            id: 1, name: "用药参考"
          },
          {
            id: 2, name: "指标检测"
          },
          {
            id: 3, name: "非药U选"
          }
        ],
        dataList: [],
        editModel: {},
        chooseList: [],
        unChooseList: [],
        drugDiseaseTypeItems: null,
        types: null,
        sortNum: null,
        drugLibId: null,
      }
    },
    mounted () {
      this._getList()
      this.initDrugDiseaseType();
    },
    methods: {
      handleQuery () {
        this.page.pageIndex = 0;
        this._getList()
      },
      _getList () {
        let param = {
          searchCondition: this.searchCondition
        };
        this.ajax({
          type: "post",
          url: this.api.portrait.getDrugDiseaseTypeList,
          data: Object.assign({}, this.page, param),
          success: (data) => {
            this.dataList = data.object
            this.pageTotal = data.totalNum
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      handleEdit (row) {
        this.dialogVisible = true;
        this.editModel = row;
        this.initDrugDiseaseTypeItem(this.editModel.id);
        this.initChooseList();
        this.initUnChooseList();
      },
      deleteRow (row) {
        row.drugDiseaseTypeId = this.editModel.id;
        this.post(this.api.drug.deleteDrugRelation, row).then((res) => {
          if (res.data.code === '200') {
            this.initChooseList();
            this.initUnChooseList();
          }
        })
      },
      initDrugDiseaseType () {
        let param = {
          pageIndex: 0,
          pageSize: 100
        };
        this.post(this.api.portrait.getDrugDiseaseTypeList, param).then((res) => {
          if (res.data.code === '200') {
            this.drugDiseaseTypeList = res.data.object;
          }
        })
      },
      initDrugDiseaseTypeItem (drugDiseaseTypeId) {
        this.post(this.api.portrait.getDrugDiseaseTypeItemList, { id: drugDiseaseTypeId }).then((res) => {
          if (res.data.code === '200') {
            this.drugDiseaseTypeListItem = res.data.object;
          }
        })
      },

      initChooseList () {
        let param = {
          drugDiseaseTypeId: this.editModel.id,
          searchCondition: this.chooseDrugName
        };
        this.post(this.api.drug.getChooseList, param).then((res) => {
          if (res.data.code === '200') {
            this.chooseList = res.data.object;
            this.chooseTotal = res.data.totalNum;
          }
        })
      },
      initUnChooseList () {
        let param = {
          drugDiseaseTypeId: this.editModel.id,
          searchCondition: this.unChooseDrugName
        };
        this.post(this.api.drug.getUnChooseList, param).then((res) => {
          if (res.data.code === '200') {
            this.unChooseList = res.data.object;
            this.unChooseTotal = res.data.totalNum;
          }
        })
      },
      addDrug (row) {
        this.diseaseItemVisible = true;
        this.drugLibId = row.id;
        this.drugDiseaseTypeItems = null;
        this.types = null;
      },

      handleDel (row) {
        this.$Modal.confirm({
          title: '确认',
          content: '<p>您确认删除该信息？</p>',
          onOk: () => {
            this.ajax({
              type: this.api.informationDel.type,
              url: this.api.informationDel.url,
              data: { id: row.id },
              success: (data) => {
                this.$Message.success(data);
                this._getList()
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          },
          onCancel: () => {
          }
        });
      },

      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
      },
      formatterIsTop (row) {
        let isTop = ["否", "是"];
        return isTop[row.isTop]
      },
      formatterTypeName (row) {
        if (row.informationTypeDto != null) {
          return row.informationTypeDto.informationTypeName
        }
      },
      catchData: function (html) {
        this.sizeForm.content = html
      },
      handleAvatarSuccess (res) {
        this.sizeForm.imageUrl = res.url;
      },
      beforeAvatarUpload (file) {
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isLt10M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isLt10M;
      },
      cancel () {
        this.dialogVisible = false;
        this._getList()
      },
      close () {
        this.initChooseList();
        this.initUnChooseList();
        this.diseaseItemVisible = false;
      },
      save () {
        if (!this.drugLibId) {
          this.$message.error('药品ID不能为空');
          return;
        }
        if (!this.editModel.id) {
          this.$message.error('病种不能为空');
          return;
        }
        if (!this.drugDiseaseTypeItems || this.drugDiseaseTypeItems.length == 0) {
          this.$message.error('病种类型不能为空');
          return;
        }
        if (!this.types || this.types.length == 0) {
          this.$message.error('药品类型不能为空');
          return;
        }
        if (!this.sortNum || isNaN(this.sortNum)) {
          this.$message.error('药品排序号不正确');
          return;
        }
        let param = {
          drugLibId: this.drugLibId,
          drugDiseaseTypeId: this.editModel.id,
          drugDiseaseTypeItemId: JSON.stringify(this.drugDiseaseTypeItems),
          type: JSON.stringify(this.types),
          sortNum: this.sortNum
        }

        this.post(this.api.drug.saveDrugRelation, param).then((res) => {
          if (res.data.code === '200') {
            this.close();
          }
        })
      }
    },
    computed: {
      ...mapGetters(['page'])
    },
    components: {
      Page,
      VueNeditorWrap
    }
  }
</script>

<style scoped>
</style>
